<!DOCTYPE html>
<html style="font-size: 37.5px;">

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title></title>
    
</head>
<link rel="stylesheet" href="./index.css"/>
<style>
    * {
        margin: 0;
        padding: 0;
       
        text-align: justify;
      
    }
    @font-face {font-family: "iconfont";
    src:  url('https://at.alicdn.com/t/font_2447685_qc1t6fbms7.ttf') format('truetype');
    }
    .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }
    .icon-jp:before {
    content: "\e664";
    }
    .icon-jp-open:before {
    content: "\e63a";
    }

   body {
        padding: .42667rem .50667rem .45333rem .50667rem;
        box-sizing: border-box;
        /* background-color: white; */
        background-color: #FF4E7D;
       
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    
    [v-cloak]{
            display: none;
        }

</style>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<body style="font-size: 24px;">
    <div id="app" v-cloak >
                <div class="title" v-html="title"></div>
                <div class="title2" v-html="x_room"></div>
               <div  class="little" v-if="win_arr.length>0">
                    <!-- <div style="text-align: right;" @click="rule=true">抽奖规则</div> -->
                    <van-button style="text-align: right;" type="primary" @click="rule=true">抽奖规则</van-button>
                    <van-button style="text-align: left;margin:0 .2rem;" type="primary"  @click="info=true">中奖信息</van-button>
                    <van-button style="text-align: right;" type="primary" @click="myinfo=true">我的中奖</van-button>
                    <!-- <div style="text-align: left;margin-left: .2rem;" @click="info=true">中奖信息</div> -->
               </div>
               <div  class="little" v-if="win_arr.length>0">
                <!-- <van-button style="text-align: right;" type="primary" @click="rule=true">我得中奖</van-button> -->
               </div>
                <div class="content">
                    <span  v-for="(item,index) in win_arr" :class="[index%8===0?'on':'']" :key="index" @click="sub(item)">
                        <i class="iconfont icon-jp" v-if="item.status===0"  style="font-size: 1rem;"></i>
                        <i class="iconfont icon-jp-open" v-if="item.status===1"  style="font-size: 1rem;"></i>
                    </span>
                </div>

                <div>
                    <van-dialog v-model="show" title="口令" @closed="det" >
                        <div class="put" style="padding: .2rem 0;">
                            <van-field v-model="code"  style="text-align: center;" placeholder="请输入口令" />
                        </div>
                   </van-dialog>
                   <van-dialog v-model="mobileShow" title="恭喜中奖,请输入联系方式" @closed="detMobile" >
                    <div class="put" style="padding: .2rem 0;">
                        <van-field v-model="mobile"  label="手机号:"  style="text-align: center;" placeholder="请输入联系方式" />
                    </div>
               </van-dialog>
                </div>
                <!-- 规则 -->
                <div>
                    <van-popup v-model="rule"  round  closeable  >
                        <div class="rule" v-html="ruleCont"></div>
                    </van-popup>
                </div>
                 <!-- 中奖信息 -->
                 <div>
                    <van-popup v-model="info"    round closeable  >
                        <div class="info">
                            <div  v-for="(item,index) in infoList" :key="index" v-if="item.gift_name&&item.gift_num">{{item.gift_name}}已被抽走{{item.gift_num}}</div>
                        </div>
                    </van-popup>
                </div>
                  <!-- 中奖信息 -->
                  <div>
                    <van-popup v-model="myinfo"    round closeable  >
                        <div class="info">
                            <div  v-for="(item,index) in myinfoList" :key="index">恭喜您中奖:{{item.gift_name}}</div>
                        </div>
                    </van-popup>
                </div>
                <!-- logo -->
                <div class="logo"  v-if="win_arr.length>0">
                    <img  src="./1.png" alt="">
                </div>
                <!-- 抽奖合作电话 -->
                <div class="phone"  v-if="win_arr.length>0">抽奖合作请添加微信: <span>xnlljfz</span></div>
            </div>
    <!-- built files will be auto injected -->
</body>

<script>
     
     var app = new Vue({
        el: '#app',
        data: {
            statusData:0,
            title:'',
            info:false,
            myinfo:false,
            myinfoList:[],
            rule:false,
            code:'',
            win_arr:[],
            show:true,
            mobileShow:false,
            mobile:'',
            // openid:'oUtJv0ezirgeY1jle8qTuvZ2k-Po',
            openid:'',
            win_id:'',
            ruleCont:'',
            infoList:[],
            x_room:'',
            infoId:'',
        },
        mounted(){
            let t=this;
          
            t.openid= t.getQueryVariable('openid')
            
            
  
        },
        methods: {
            det(){
                let t=this;
              if(!t.code){
                t.show=true;
                t.code='';
              
                  return vant.Toast("请输入正确得兑换")
              }else{
                t.getList()
               
              }

            },
            detMobile(){
                let t=this;
                if(!t.mobile){
                t.mobileShow=true;
                t.mobile='';
                  return vant.Toast("请输入正确的联系方式")
              }else{
                t.subMobile()
              }
            },
            
            getList(){
                let t=this;
                let d = { code: t.code }
                axios.get('http://xiniu.platform.bjxnll.com/win/getGift', {
                    params: d,
                }).then(function (res) {

                        if (res.data.data.code === 200) {
                            
                           t.title= res.data.data.data.title;
                           t.x_room= res.data.data.data.x_room
                           t.win_arr=  res.data.data.data.win_arr;
                            t.ruleCont=res.data.data.data.rule;
                            t.bg_url=  res.data.data.data.bg_url;
                            t.infoList=  res.data.data.data.giftInfo;
                            console.log("infoList",t.infoList)
                            t.infoId=res.data.data.data.id;
                            t.gitMyinfo()
                            if(t.bg_url){
                                document.querySelector('body').setAttribute('style', 'background-image:url("'+t.bg_url+'"); ')
                       
                            }
                         }else if(res.data.data.code === 400){
                            t.show=true;
                            t.code='';
                            return vant.Toast(res.data.data.message)
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
            gitMyinfo(){
                
                let t=this;
                let d = { openid:t.openid,win_id:t.infoId }
                axios.get('http://xiniu.platform.bjxnll.com/win/myGift', {
                    params: d,
                }).then(function (res) {
                        console.log("openid",res)
                        if (res.data.data.code === 200) {
                            
                                t.myinfoList=res.data.data.data
                         }else if(res.data.data.code === 400){
                            t.show=true;
                            t.code='';
                            return vant.Toast(res.data.data.message)
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
            sub(item){
                let t=this;

               
             
             

                if(item.status==1){
                    return
                }
                vant.Dialog.confirm({
          
                    message: '<i class="iconfont icon-jp"  style="font-size: 1rem;color:red;    display: inline-table;"></i>确定要点开礼品吗?',
                    }).then((res) => {
                       t.chuJiang(item)
                    }).catch(() => {
                        // on cancel
                    });
            },
            chuJiang(item){
                let t=this;
                let d = {  key: item.key,code:t.code,openid:t.openid}
               
                axios.get(' http://xiniu.platform.bjxnll.com/win/postWin', {
                    params: d,
                }).then(function (res) {
                    console.log("res",res)
                        if (res.data.code === 200) {
                            

                             
                                if(res.data.data.is_g===1){ 
                                    t.gitMyinfo()
                                                                
                                            
                                    vant.Dialog.alert({

                                    message: res.data.data.gift_name,
                                    }).then(() => {
                                    t.mobileShow=true
                                    t.win_id=res.data.data.win_id;
                                    });


                                    }else{

                                        vant.Dialog.alert({

                                        message: res.data.data.gift_name,
                                        }).then(() => {

                                        });

                                    return 
                                    }
                           
                          
                            
                        }else{
                            // t.show=true;
                            // t.code='';
                            return vant.Toast(res.data.message)
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
            subMobile(){
                let t=this;
                let d={'openid':t.openid,'mobile':t.mobile,'win_id':t.win_id }
                 
                axios.get('http://xiniu.platform.bjxnll.com/win/saveWinInfo', {
                    params: d,
                }).then(function (res) {

                        if (res.data.data.code === 200) {
                            
                            return vant.Toast(res.data.data.message)
                            
                        }else if(res.data.data.code === 400){
                            // t.show=true;
                            // t.code='';
                            return vant.Toast(res.data.data.message)
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    })


            },
            getQueryVariable(variable){
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    if(pair[0] == variable){return pair[1];}
            }
            return(false);
             }
        }
        })

   



</script>
<style>
    .title{
        font-weight: 700;
        font-size: .73333rem;
        color: #ffdac5;
        text-align: center;
        text-shadow: 3px 5px 6px #ff0202;
    }
    .title2{
        font-weight: 700;
        font-size: .6rem;
        color: #ffdac5;
        text-align: center;
        margin-top: .2rem;
        text-shadow: 3px 5px 6px #ff0202;
    }
    .rule,.info{
        padding: 1rem .5rem;
        font-size: .5rem;

        line-height: .7rem;
       
    }
  
    .content{
        margin-top: .5rem;
        display: flex;
    flex-wrap: wrap;
    justify-content: center;
    }
    .content>span{
        /* background-color: rgb(7, 193, 96); */
        /* margin: 0 .26667rem .26667rem 0; */
        padding: .4rem .3rem;
        display: inline-flex;
            -webkit-box-align: center;
            align-items: center;
            color: #fff;
            font-size: .42rem;
            line-height: .42667rem;
            border-radius: .05333rem;
          
            height: .42667rem;
            text-align: center;
            width: .5rem;
            justify-content: center;
    }
    .little{
        display: flex;
        margin-top: .2rem;
        justify-content: center;
    }
    .little>button{
        
       
      
    }

    .van-dialog__message{
        align-items: center;
    display: flex;
    justify-content: center;
    }
    /* .put input{
        text-align: center;
    } */
  .van-dialog__header{
    color: #ff0808;
  }
  .van-popup{
      width: 8rem;
  }
  .van-popup__close-icon--top-right{
      top: 10px;
  }
  .phone{
      margin-top: .5rem;
      font-size: .5rem;
      color: #ffdac5;
        text-align: center;
        margin-top: .2rem;
        text-shadow: 3px 5px 6px #ff0202;
  }
  .phone>span{

          text-decoration: underline;
  }
  .little>.van-button{
   
    height: .8rem;
  }
  .logo{
      margin: .3rem 0;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .logo>img{
    width: 50%;
  }
</style>
</html>